<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%" highlight-current-row
      :header-cell-style="{ background: 'rgb(179, 108, 255)', color: '#fff' }" max-height="650">
      <el-table-column v-for="item in tableConfig" :key="item.prop" :prop="item.prop" :label="item.label" align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {
  orderListApi,
  goodsDeleteApi,
  goodsDetailApi,
  goodsEditApi,
  goodsAddApi,
} from "../../api/index";
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { onMounted, ref, reactive } from 'vue'
const router = useRouter()
const tableConfig = ref([
  {
    label: "id",
    prop: "id",
  },
  {
    label: "订单编号",
    prop: "orderid",
  },

  {
    label: '实付款',
    prop: 'paymoney'
  },
  {
    label: "订单状态",
    prop: 'status',
    status: 'orderstatus'
  },
])

const tableData = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(50);
const dialogFormVisible = ref(false)
const getList = () => {
  orderListApi({
    page: page.value,
    pageSize: pageSize.value,
  }).then((res) => {
    if (res.data.code == 1) {
      res.data.data.forEach((item, index) => {
        if (item.status == 0) {
          item.status = "待付款"
        } else if (item.status == 1) {
          item.status = "已付款"
        }
      })
      tableData.value = res.data.data;
      total.value = res.data.total;
    }
    if (res.data.code == 401) {
      ElMessage({
        type: "error",
        message: res.data.msg,
        duration: 1000,
        onClose: () => {
          router.replace("/login");
        },
      });
    }
  });
}
getList()
</script>

<style lang="scss" scoped>
.table-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>